<route>
    {
        meta: {
            layout: 'index',
            title:'岗位管理'
        }
    }  
</route>
<template>
    <a-row>
        <a-col :span="6">
            <positCategTree @confirm="handleSearch"></positCategTree>
        </a-col>
        <a-col :span="18">
            <view>
                <a-row>
                    <a-input-search v-model:value="searchKey" placeholder="请输入名称"
                        style="width: 200px; margin-bottom: 10px; margin-right: 50px;" @search="onSearch()" />
                    <a-button type="primary" style="margin-bottom: 10px; width: 80px;" @click="add">
                        <template #icon><plus-outlined /></template>新增
                    </a-button>
                </a-row>

                <a-table :columns="columns" :data-source="dataSource" :pagination="false">
                    <template #bodyCell="{ column, text, record }">
                        <template v-if="column.dataIndex === 'action'">
                            <div style="margin-right: 8px;">
                                <span>
                                    <a-button type="link" @click="editItem(record)">
                                        <FormOutlined />
                                    </a-button>
                                    <a-popconfirm title="确定删除该条记录 ?" @confirm="del(record.id)">
                                        <a-button type="link" danger>
                                            <DeleteOutlined />
                                        </a-button>
                                    </a-popconfirm>
                                </span>
                            </div>
                        </template>
                    </template>
                </a-table>
                <AntdZh>
                    <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total"
                        @change="getList" />
                </AntdZh>

                <AntdConfirmModal :title='title ? "新增岗位" : "修改信息"' ref="modalRef" width="550px" :keepSlot="false"
                    @confirm="submitForm">
                    <a-form :model="form" name="basic" :label-col="{ span: 5 }">
                        <a-row>
                            <a-col :span="20">
                                <a-form-item label="职级" name="jobGradeId" :rules="[{ required: true, message: '请输入职级' }]">
                                    <a-input-number v-model:value="form.jobGradeId" style="width: 365px;"
                                        controls-position="right" :min="0" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="20">
                                <a-form-item label="岗位名称" name="jobName" :rules="[{ required: true, message: '请输入岗位名称' }]">
                                    <a-input v-model:value="form.jobName" style="width: 365px;" placeholder="请输入岗位名称" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="20">
                                <a-form-item label="编码" name="jobCode" :rules="[{ required: true, message: '请输入编码' }]">
                                    <a-input v-model:value="form.jobCode" style="width: 365px;" placeholder="请输入编码" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="20">
                                <a-form-item label="排序" name="orderNum">
                                    <a-input-number v-model:value="form.orderNum" style="width: 365px;"
                                        controls-position="right" :min="0" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="20">
                                <a-form-item label="状态" name="status">
                                    <!-- <a-input-number v-model:value="form.status" style="width: 365px;"
                                        controls-position="right" :min="0" /> -->
                                    <a-switch v-model:checked="form.status" checked-value="1" un-checked-value="0" checked-children="启用" un-checked-children="禁用" @change="swiChange"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="20">
                                <a-form-item label="备注" name="remark">
                                    <a-input v-model:value="form.remark" style="width: 365px;" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </AntdConfirmModal>
            </view>
        </a-col>
    </a-row>
</template>
<script setup>
import positCategTree from '../../components/positCategTree';
import { PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { queryList, updateOne, deleteOne, createOne } from "../../api/jobs"
import { columns, formValue } from './index';
import useApp from "@/hooks";
const { $, proxy } = useApp();
const dataSource = ref([]);
const form = ref(formValue);
const title = ref(null);
const modalRef = ref(null);
const total = ref(1)
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id' });

//编辑
function editItem(e) {
    form.value = e
    title.value = false
    modalRef.value.openModal()
}
// 删除
const del = key => {
    deleteOne(key).then(res => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        getList()
    })
}
// 新增
function add() {
    title.value = true
    form.value = formValue
    modalRef.value.openModal()
}
function swiChange(checked, e) {
    form.value.status = checked
}
// 提交
function submitForm() {
    if (title.value == true) {
        createOne(form.value).then(res => {
            $.showToast({
                title: '新增成功',
                icon: 'success'
            })
            modalRef.value.closeModal();
            getList()
        })
    } else if (title.value == false) {
        updateOne(form.value).then(res => {
            $.showToast({
                title: '更新成功',
                icon: 'success'
            })
            modalRef.value.closeModal();
            getList()
        })
    }
}
function handleSearch(key) {
    console.log(key);
}
// 搜索
function onSearch() {

}
function getList() {
    queryList(query.value).then(res => {
        console.log(res.content)
        dataSource.value = res.content
        total.value = res.totalElements;
    })
}
getList()
</script>